<template>
    <div class="search-list">
        <div class="headers">
            <Header></Header>
            <ul>
                <li>综合</li>
                <li>销量</li>
                <li>新品</li>
                <li>价格</li>
            </ul>
        </div>
        <!-- 商品列表 -->
        <section>
            <ul>
                <li v-for="item in goodsList" :key="item.id" >
                    <img :src="item.imgUrl" alt="">
                    <h4>{{ item.name }}</h4>
                    <div class="price">
                        <div>
                            <span>¥</span>
                            <p>{{ item.price }}</p>
                        </div>
                        <div>{{ item.collction }} <i class="iconfont icon-fangdajing"></i></div>
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<script setup>
import Header from '../../components/Search/Header.vue';
// 拿到header中的搜索值
import { useRoute } from 'vue-router'
let route = useRoute()
// axios请求
import api from '../../common/api/request.js'

import { ref, onMounted,watch } from 'vue'
let goodsList = ref([])
onMounted(() => {
    console.log('onMounted')
    getDate()
})
// 网络请求接口数据
const getDate = () => {
    console.log('getDate')
    api.$axios({
        url: '/api/goods/shopList',
        params: {
            searchName:route.query.key
        }
    }).then(res => {
        console.log('查询到的数据：',res)
        goodsList.value = res
    })
}

watch(() => route.query.key, (newVal, oldVal) => {
    if(newVal !== oldVal){
        getDate()
    }
})

</script>

<style scoped>
.search-list{
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.headers ul{
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 1rem;
    padding: 0.2rem 0;
    font-size: 0.4rem;
    color: #666;
    border-bottom: 1px solid #ccc;
}
.headers ul li{
    display: flex;
    align-items: center;
}
section{
    flex: 1;
    overflow: hidden;
}
section ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
section ul li{
    width: 50%;
    padding: 0.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
section ul li img{
    width: 100%;
    
}
section ul li h4{
    font-size: 0.32rem;
    text-align: center;
    margin: 0.2rem 0;
}
section ul li .price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
section ul li .price div{
    display: flex;
    align-items: center;
    font-size: 0.32rem;
}
section ul li .price div span{
    font-size: 0.32rem;
}
section ul li .price div p{
    font-size: 0.4rem;
    margin-left: 0.2rem;
}
</style>